<template>
  <div class="register-container">
    <loginHeaderVue></loginHeaderVue>
    <div class="register-box">
      <h3>欢迎注册小兔仙系统</h3>
      <el-tabs tab-position="left" style="height: 330px" @tab-click="handleClick">
        <el-tab-pane label="普通注册">
          <NormalForm ref="normalForm"></NormalForm>
        </el-tab-pane>
        <el-tab-pane label="邮箱注册">
          <EmailForm ref="emailForm"></EmailForm>
        </el-tab-pane>
        <el-tab-pane label="手机注册">手机注册</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue,Ref } from "vue-property-decorator";
import NormalForm from "@/components/NormalForm.vue"
import EmailForm from "@/components/EmailForm.vue"
import loginHeaderVue from "./components/login-header.vue";
@Component({
  name: "Register",
  components: {
    NormalForm,
    EmailForm,
    loginHeaderVue
  },
})
export default class Register extends Vue {
  @Ref() readonly normalForm!: NormalForm
  @Ref() readonly emailForm!: EmailForm
  // 调用组件内的重置方法
  private handleClick(){
    this.normalForm.resetForm()
    this.emailForm.resetForm()
  }
}
</script>

<style lang="scss" scoped>
.register-container {
  width: 100%;
  height: 100%;
  background: url("../assets/common/login-bg.png") no-repeat center;
  background-size: initial;
  .register-box {
    width: 600px;
    height: 400px;
    background: #fff;
    border-radius: 10px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-10%, -50%);
    h3 {
      text-align: center;
    }
  }
}
</style>
